<!-- 首页物品展示 -->
<template>
  <div class="center">
    <!-- 顶部模块 -->
    <div class="searching">
      <!-- 搜索 -->
      <div style="display: flex; justify-content: center">
        <!-- 返回按钮 -->
        <div class="home_page">
          <el-button
            icon="el-icon-back"
            size="small"
            plain
            @click="$router.go(-1)"
          >
            返回
          </el-button>
        </div>
        <!-- logo -->
        <span class="logo" @click="$router.push({ name: 'home' })">
          艺术品交易平台
        </span>
      </div>
    </div>

    <!-- 导航条 -->
    <div class="hierarchy">
      <span class="el-icon-location"></span>
      <span style="border-left: 3px solid #99a9bf"></span>
      <span @click="$router.push({ name: 'home' })" style="cursor: pointer">
        艺术品交易平台
      </span>
      <span style="border-left: 3px solid #99a9bf"></span>
      <span>艺术家</span>
    </div>

    <!-- 艺术家详情 -->
    <div>
      <div class="artist_box">
        <div class="txt">
          <h1 style="text-align: center">个人简介</h1>
          <br />
          <h2>{{ artist_information.real_name }}</h2>
          <br />
          <p>
            {{ artist_information.bio }}
          </p>
          <br />
          <p>联系电话：{{ artist_information.phone }}</p>
        </div>
        <div style="float: right">
          <!-- <img
            src="../assets/img/touxiang02.jpg"
            alt=""
            style="height: 200px; width: 150px; border-radius: 50%"
          /> -->
          <svg
            t="1713333692759"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="6750"
            id="mx_n_1713333692761"
            width="200"
            height="200"
          >
            <path
              d="M784.7936 612.72064c96.64512-0.1024 175.616 75.93984 177.72544 171.1104 2.10944 95.17056-73.44128 174.53056-169.984 178.5856L784.7936 962.56H266.4448l-2.8672-0.12288-4.03456 0.12288c-91.79136-0.06144-168.42752-69.0176-176.80384-159.06816l-0.55296-7.72096L81.92 787.64032c0-65.9456 37.62176-126.27968 97.34144-156.0576a179.8144 179.8144 0 0 1 185.32352 15.0528l7.3728 5.632 5.91872 5.03808h288.50176l5.95968-5.03808a178.21696 178.21696 0 0 1 93.40928-38.5024l9.48224-0.8192 9.6256-0.2048h-0.06144z m-93.75744 111.616c-3.6864 3.3792-8.47872 5.61152-13.66016 6.3488l-3.93216 0.3072H370.8928c-6.63552 0-12.98432-2.37568-17.6128-6.63552-34.6112-31.70304-86.60992-42.02496-132.7104-26.33728-46.12096 15.6672-57.20064 33.91488-60.06784 78.336l-0.16384 6.08256 0.16384 6.20544c3.11296 57.32352 33.03424 103.34208 96.48128 106.8032l6.7584 0.14336 4.54656-0.06144 3.64544 0.06144h507.8016c68.85376 0 104.20224-50.40128 104.20224-112.59904 0-62.17728-35.34848-92.11904-104.20224-92.11904-33.792 0-65.37216 12.1856-88.69888 33.4848zM636.5184 111.24736l11.1616 7.08608 4.56704 3.072 2.21184-3.6864a49.99168 49.99168 0 0 1 28.20096-21.01248l5.20192-1.2288 4.8128-0.6144c27.68896-2.37568 52.06016 17.83808 54.43584 45.11744 1.26976 14.58176 1.78176 28.81536 1.51552 42.65984l-0.63488 14.58176 2.60096 2.37568c78.2336 73.78944 79.11424 143.4624 10.40384 155.36128l-5.44768 0.77824-4.7104 0.512 1.26976 6.7584c0.79872 5.12 1.4336 10.36288 1.92512 15.5648l0.512 7.8848 0.32768 11.81696c-0.04096 88.4736-51.77344 169.0624-132.9152 207.01184a235.56096 235.56096 0 0 1-246.84544-29.40928c-69.632-55.9104-100.37248-146.28864-79.01184-232.2432l2.88768-10.5472 1.08544-3.31776-1.92512-0.24576c-45.38368-7.20896-68.42368-48.00512-64.63488-97.21856l0.63488-6.4512 0.28672-1.9456-0.24576-1.2288c-9.70752-60.74368 36.82304-130.4576 111.39072-151.71584l7.7824-1.98656 7.7824-1.6384a318.60736 318.60736 0 0 1 72.2944-5.5296l9.1136 0.55296 11.0592-0.59392c68.38272-2.7648 123.6992 12.9024 182.90688 49.52064V111.2064z m-172.81024 28.8768l-10.4448 0.57344-3.1744-0.04096a225.54624 225.54624 0 0 0-61.07136 3.66592c-49.27488 9.05216-80.46592 52.08064-76.02176 85.4016l0.69632 3.97312c0.6144 2.72384 0.69632 5.55008 0.22528 8.31488-4.5056 26.9312 3.7888 44.15488 18.78016 46.57152 6.0416 0.94208 11.75552 1.04448 17.408 0.36864l5.61152-0.98304c8.3968-1.82272 17.1008 1.31072 22.3232 8.00768 5.26336 6.71744 6.08256 15.81056 2.12992 23.32672a155.97568 155.97568 0 0 0 36.08576 190.68928 161.91488 161.91488 0 0 0 196.56704 11.79648c60.5184-40.96 84.97152-117.20704 59.33056-184.97536a21.56544 21.56544 0 0 1 4.56704-22.528c5.7344-6.0416 14.45888-8.37632 22.528-6.00064l2.82624 1.04448c3.97312 1.82272 7.2704 2.62144 10.11712 2.62144 23.4496 0 29.61408-10.56768 4.75136-38.62528l-6.59456-7.04512a286.72 286.72 0 0 0-3.74784-3.7888l-8.43776-8.11008a562.05312 562.05312 0 0 0-15.1552-13.5168 21.64736 21.64736 0 0 1-7.45472-18.49344c0.69632-6.71744 1.06496-13.57824 1.2288-20.64384l-0.04096-10.6496v0.94208a21.87264 21.87264 0 0 1-13.59872 17.46944 22.4256 22.4256 0 0 1-22.1184-3.072c-63.22176-49.07008-111.7184-68.93568-177.31584-66.29376z m57.58976 299.27424c27.0336 0 54.02624-0.90112 54.02624 0 0 25.9072-24.20736 53.22752-54.02624 53.22752-29.83936 0-54.02624-23.83872-54.02624-53.22752h54.02624z"
              fill="#80d0f6"
              p-id="6751"
            ></path>
            <path
              d="M160.3584 798.72H880.64c0 25.66144-7.7824 46.61248-23.38816 62.79168a128.26624 128.26624 0 0 1-54.1696 34.07872h-570.1632c-26.58304-10.79296-44.3392-22.15936-53.248-34.07872-8.92928-11.89888-15.36-32.82944-19.33312-62.79168z"
              fill="#80d0f6"
              p-id="6752"
            ></path>
          </svg>
        </div>
      </div>
    </div>
    <!-- 艺术家作品展示 -->
    <div class="title">
      <h1>作品展览</h1>
      <h2>ARTIST SHOWCASE</h2>
    </div>
    <!-- 艺术家信息 -->
    <div class="artist">
      <div class="artist_uls">
        <!-- 获取前四条数据 -->
        <div
          class="artist_ul_li"
          v-for="(i, index) in this.list"
          :key="index"
          @click="router_id(i)"
        >
          <div class="artist_ul_li_info">
            <div class="img">
              <img :src="'http://127.0.0.1:8000' + i.image" alt="" />
            </div>
            <div class="artist_detail">
              <p>
                作品:<span>{{ i.title }}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getuser } from "@/api/user";
import { getartistWork } from "@/api/artworks";
import { mapState } from "vuex";
import { Message } from "element-ui";
export default {
  data() {
    return {
      id: "",
      // 当前页面物品数据
      artist_information: {},
      list: [],
    };
  },
  computed: {
    ...mapState(["user"]),
  },

  created() {
    this.getartstinfo(this.$route.query.id);
    this.getlist(this.$route.query.id);
  },
  methods: {
    // 根据id获取艺术家信息
    getartstinfo(id) {
      console.log(id);
      getuser(id).then((res) => {
        this.artist_information = res.results;
      });
    },
    // 获取该艺术家作品
    getlist(id) {
      getartistWork(id).then((res) => {
        console.log(res);
        this.list = res.results;
        this.Empty = false;
      });
    },
    // 点击作品跳转到作品详情
    router_id(i) {
      this.$router.push({ path: "/ItemDetails", query: { id: i.id } });
      console.log(i.id);
    },
  },
};
</script>

<style lang="less" scoped>
@import "../assets/css/artist.less";

.center {
  position: relative;
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 100px;
}

.home_page {
  position: absolute;
  top: 10px;
  left: 200px;
}

.logo {
  height: 50px;
  line-height: 50px;
  padding-left: 10px;
  padding-right: 30px;
  font-weight: 700;
  font-size: 24px;
  border-left: 3px solid #99a9bf;
  cursor: pointer;
}

.input {
  margin-top: 8px;
}

/* 导航条 */
.hierarchy {
  display: flex;
  margin-bottom: 5px;
}

.hierarchy span {
  height: 20px;
  margin: 10px;
}

.artist_box {
  margin: 35px auto;
  height: 300px;
  width: 1000px;
  background-image: linear-gradient(to bottom, #d1d0ff 0%, #fdfdfd);
  /* background-color: rgb(238, 238, 238); */
  border-radius: 10px;
  box-shadow: 0 0 10px #000000;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  color: rgb(102, 102, 102);
  font-family: "微软雅黑";
}
.txt {
  padding: 20px;
  text-indent: 2em;
  line-height: 25px;
  text-align: left;
  font-size: 16px;
  color: rgb(102, 102, 102);
  font-family: "微软雅黑";
  letter-spacing: 1px;
}

.title {
  display: flex;
  width: 1200px;
  margin: 0 auto;
  margin-bottom: 30px;
  overflow: hidden;
  border-bottom: 1px solid #cecece;
  padding-bottom: 10px;
  flex-direction: column;
  align-items: baseline;
}
</style>
